<template>
    <view class="u-page" style="background-color: #ffffff;height: 100vh;overflow: hidden;">
      <view style="padding: 1vw">
        <view class="search-bar">
          <up-form>
          <up-form-item
              label="模板名称："
              labelWidth="auto">
          </up-form-item>
            <up-input v-model="search.templateName" placeholder="请输入模板名称"/>
            <up-form-item
                label="模板类型："
                labelWidth="auto" >
              <up-input border="none" @click="openSelectType" readonly  v-model="search.temType" placeholder="请选择类型"/>
              <template #right>
                <up-icon
                    name="arrow-right"
                ></up-icon>
              </template>
<!--              <up-input v-model="search.noticeTitle" placeholder="请输入模板类型"/>-->
            </up-form-item>
            <up-row style="margin-top: 10px">
              <up-button type="primary" style="width: 40%" @click="toSearch">查询</up-button>
              <up-button type="primary" style="width: 40%" @click="toReset">重置</up-button>
            </up-row>

          </up-form>
        </view>
      </view>
      <up-divider></up-divider>
      <view class="list-container" style="height: 70vh;overflow-y: scroll">
        <scroll-view
            refresher-enabled
            @refresherrefresh="pullDownList"
            :refresher-triggered="triggered"
        >
          <up-list>
            <up-list-item
                v-for="(item, index) in listData"
                :key="index">
              <up-swipe-action>
                <up-swipe-action-item
                    :options="options1"
                    @click="handleButtonClick1(item)"
                    :autoClose="false"
                >
                <up-cell>
                  <template #title>
                    模板名称：{{item.templateName}}<br>
                    模板类型：{{item.temType}}
                  </template>
                </up-cell>
                </up-swipe-action-item>
              </up-swipe-action>
            </up-list-item>
<!--            <up-loadmore :status="loadmoreStatus" @loadmore="scrolltolowerGetList" loadmoreText="点击加载更多"/>-->
          </up-list>
        </scroll-view>
      </view>
      <up-action-sheet description="请选择模板类型" :actions="list" :show="show" @select="selectClick" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" cancelText="取消" @close="show = false"></up-action-sheet>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { getAllTempList } from '@/api/system/sysIndex.js'
const listData = ref([]) // 存储分页数据
const search = ref({
  pageNum:1,
  pageSize:100,
  templateName:'',  //模板名称
  temType:''  //模板类型
})

//点击选择模板类型
const list = ref([
  {
    name: '系统模板',
  },
  {
    name: '学生模板',
  }
]);
const show = ref(false);
const selectClick = (index) => {
  search.value.temType = index.name
  show.value = false
};

function openSelectType(){
  show.value = true
}

const options1 = ref([{
  text: '选择',
  style:{
    backgroundColor:'#3c9cff'
  }
}]);
const loadmoreStatus = ref('loadmore')
//查询
function toSearch(){
  pullDownList()
}
//重置
function toReset(){
  search.value = {
    pageNum:1,
    pageSize:100,
    templateName:'',  //模板名称
    temType:''  //模板类型
  }
  pullDownList()
}

//下拉刷新
const triggered=ref(false)
function pullDownList(){
  triggered.value = true
  getTempList()
}

//上拉加载更多
// function scrolltolowerGetList(){
//   if (['loading', 'nomore'].includes(loadmoreStatus.value)) return
//   loadmoreStatus.value = 'loading'
//   search.value.pageNum++
//   getAllTempList(search.value).then((response) => {
//     if (search.value.pageSize  * (search.value.pageNum- 1)>= response.total){
//       loadmoreStatus.value = 'nomore'
//     }else {
//       for (let i = 0; i <response.rows.length; i++) {
//         listData.value.push(response.rows[i])
//       }
//       loadmoreStatus.value = 'loadmore'
//     }
//   });
// }

//选择模板
function handleButtonClick1(item) {
  uni.navigateTo({
    url: `/pages/laboratory/createExperiment?tempId=${item.id}`
  });
}
// //查询通知列表
function getTempList(){
  search.value.pageNum = 1
  loadmoreStatus.value = 'loadmore'
  // 模拟请求后端接口获取分页数据
  getAllTempList(search.value).then((response) => {
    listData.value = response.rows || [];
    setTimeout(()=>{
      triggered.value = false
    },1000)
  });
}
getTempList()
</script>

<style lang="scss" scoped>

</style>
